<template>
  <div>
  </div>
  
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header class="home-header">
      <div>
        <img class="img_header" src="../assets/ss.jpg" alt="" />
        <span>学生后台管理系统</span>
      </div>
      <el-button
        v-loading.fullscreen.lock="fullscreenLoading"
        type="danger"
        plain
        @click="logout"
        >退出</el-button
      >
    </el-header>

    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">
          <i class="el-icon-menu"></i>
        </div>
        <!-- 侧边栏菜单区 -->
        <el-menu
          :uniqueOpened="true"
          background-color="#202327"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
          <el-submenu index="1">
            <!-- 一级菜单模板区 -->
            <template #title>
              <!-- 图标 -->
              <i class="el-icon-s-grid"></i>
              <!-- 文本 -->
              <span>首页详情</span>
            </template>

            <el-menu-item index="/welcome">
              <template #title>
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>首页</span>
              </template>
            </el-menu-item>
          </el-submenu>


          <!-- 一级菜单 -->
          <el-submenu index="2">
            <!-- 一级菜单模板区 -->
            <template #title>
              <!-- 图标 -->
              <i class="el-icon-edit-outline"></i>
              <!-- 文本 -->
              <span>用户管理</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item index="/user">
              <template #title>
                <!-- 图标 -->
                <i class="el-icon-s-custom"></i>
                <!-- 文本 -->
                <span>用户信息</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <!-- 一级菜单 -->
          <el-submenu index="3">
            <!-- 一级菜单模板区 -->
            <template #title>
              <!-- 图标 -->
              <i class="el-icon-edit-outline"></i>
              <!-- 文本 -->
              <span>学生管理</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item index="/student">
              <template #title>
                <!-- 图标 -->
                <i class="el-icon-s-custom"></i>
                <!-- 文本 -->
                <span>学生信息</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <!-- 一级菜单模板区 -->
            <template #title>
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>信息变更统计</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item index="/hello">
              <template #title>
                <!-- 图标 -->
                <i class="el-icon-s-data"></i>
                <!-- 文本 -->
                <span>折线图</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import router from "../router/index";

export default {
  data() {
    return {
      //加载效果，就是转圈圈的，看着像回事哈哈
      fullscreenLoading: false,
      //应该是控制菜单缩进的吧，我也忘了
      isCollapse: false,
    };
  },

  methods: {
    //退出
    logout() {
      //清除 token
      window.localStorage.clear();

      //全屏加载效果
      this.fullscreenLoading = true;
      setTimeout(() => {
        //判断token是否为空
        if (localStorage.token == null) {
          this.$message.success("退出成功");
        }
        //重定向到 login 页
        router.push("/login");
        this.fullscreenLoading = false;
      }, 2000);
    },
    //点击按钮，切换菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
  created() {
    //获取所有菜单
    //暂无此功能
    // this.getMenuList();
    //不过可以预先加载出学生数据
    // this.getAllStudent();
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
  .img_header {
    width: 57px;
    height: 57px;
    border: solid 2px mediumpurple;
  }
}
.home-container {
  height: 100%;
  // background-color: rgb(112, 114, 112);
  //   background-image: url("../assets/bg2.jpg");
}
.home-header {
  color: #fff;
  background-color: #fff;
  border-bottom: solid 2px #202327;
  background-image: url(../assets/bg2.jpg);
}
.el-aside {
  background-color: #202327;
}
.toggle-button {
  background-color: mediumpurple;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
}
</style>